<template>
    <baidu-map 
      class="full" 
      :center="{lng: 119.778448, lat: 48.146704}" 
      :zoom="zoom" :max-zoom="16" :min-zoom="8"
      :scroll-wheel-zoom="true"
    >
      <!-- 缩放 控件 -->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>

      <!-- 地图类型 控件 -->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-map-type>

      <!-- 描边 -->
      <bm-boundary name="呼伦贝尔市鄂温克族自治旗" :strokeWeight="2" strokeColor="blue" :fillOpacity="0" />

      <bm-marker
        :position="{lng: 119.778448, lat: 48.646704}" 
        :dragging="false" 
      />
      
      <!-- <bm-marker 
        v-for="(item, index) in pointList" :key="index" 
        :position="item.point" 
        :dragging="false" 
        @click="openSignDetail(item)"
      >
        <bm-info-window 
          :width=300 
          :show="signDetail.index == item.index" 
          @close="signDetail = {}"
        >
          <div class="w_full flex_row_between">
            <div class="w_50 h_50">
              <img class="full" src="../../assets/images/icon/def-user.png" alt="">
            </div>

            <div class="w_full-60">
              <div class="cursor" @click="goToMuHuPage(item)">牧户姓名： <u class="color_blue"></u></div>
              <div>地址：{{ signDetail.townName + item.villageName }}</div>
            </div>
          </div>
        </bm-info-window>
      </bm-marker> -->

      <!-- 跳点 -->
      <!-- <bm-marker v-for="(item, index) in points" :key="index" :position="item" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
        <bm-label content="xxxxxxxxxxxxxx" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker> -->

    </baidu-map>
</template>

<script>
  export default {
    name: 'BaiDuMap',
    props: {
      pointList: []
    },
    data() {
      return {
        zoom: 8,
        signDetail: {}
      }
    },
    async mounted() {

    },
    methods: {
      openSignDetail(item) {
        this.signDetail = item
      },

      goToMuHuPage(item) {
        // this.$router.push({
        //   path: `/muHuPage/${item.townId}/${item.townName}/${item.villageId}/${item.villageName}/${item.muhuId}`
        // })
      }
    }
  }
</script>

<style>
  .BMap_cpyCtrl, .anchorBL > a { display: none !important; }
</style>
